<template>
  <div class="card" id="customer-department-new">
    <div class="card-header my-0 py-0">
      <nav aria-label="breadcrumb" role="navigation">
        <ol class="breadcrumb pb-0">
          <li class="breadcrumb-item">
            <router-link to="/customers">企业客户</router-link>
          </li>
          <li class="breadcrumb-item">
            <router-link to="/customer/departments">部门信息</router-link>
          </li>
          <li class="breadcrumb-item active" aria-current="page">新建</li>
        </ol>
      </nav>
    </div>
    <div class="card-body my-0 py-0">
      <form id="frmUser" role="form" class="form-horizontal">
        <div class="row my-1">
          <label class="control-label col-3 text-end"> 公司 </label>
          <div class="col-9">
            <my-select-customer
              :customerId.sync="customerId"
              :minId="1"
              :disabled="selectCustomerDisabled"
            ></my-select-customer>
          </div>
        </div>
        <div class="col-12 row">
          <div class="col-6">
            <div class="row my-1">
              <label class="control-label col-6 text-end"> 部门编号* </label>
              <div class="col-6">
                <input
                  type="text"
                  class="form-control"
                  v-model.number="deptId"
                />
                <small class="form-text text-muted">部门唯一编号，数字</small>
              </div>
            </div>
            <div class="row my-1">
              <label class="control-label col-6 text-end"> 部门名称* </label>
              <div class="col-6">
                <input type="text" class="form-control" v-model="name" />
                <small class="form-text text-muted"></small>
              </div>
            </div>
            <div class="row my-1">
              <label class="control-label col-6 text-end"> 上级部门编号 </label>
              <div class="col-6">
                <input
                  type="text"
                  class="form-control"
                  v-model="parentDeptId"
                />
                <small class="form-text text-muted"
                  >上级部门编号，数字，没有则留空</small
                >
              </div>
            </div>
          </div>
          <div class="col-6">
            <div class="row my-1">
              <label class="control-label col-3 text-end"> 联系人 </label>
              <div class="col-6">
                <input type="text" class="form-control" v-model="linkman" />
                <small class="form-text text-muted">联系人</small>
              </div>
            </div>
            <div class="row my-1">
              <label class="control-label col-3 text-end"> 手机 </label>
              <div class="col-6">
                <input type="text" class="form-control" v-model="mobile" />
                <small class="form-text text-muted">手机号</small>
              </div>
            </div>
            <div class="row my-1">
              <label class="control-label col-3 text-end"> 电话 </label>
              <div class="col-6">
                <input type="text" class="form-control" v-model="phone" />
                <small class="form-text text-muted">联系电话</small>
              </div>
            </div>
            <div class="row my-1">
              <label class="control-label col-3 text-end"> 电子邮件 </label>
              <div class="col-6">
                <input type="text" class="form-control" v-model="email" />
                <small class="form-text text-muted"></small>
              </div>
            </div>
            <div class="row my-1">
              <label class="control-label col-3 text-end"> 备注 </label>
              <div class="col-6">
                <input type="text" class="form-control" v-model="remark" />
                <small class="form-text text-muted"></small>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="card-footer text-center bg-light">
      <button
        type="button"
        class="btn btn-primary"
        @click.stop="saveDept()"
      >
        保存
      </button>
      <button
        type="button"
        class="btn btn-secondary ms-2"
        @click.stop="back()"
      >
        取消
      </button>
    </div>
  </div>
</template>

<script>
import {
  createDepartment,
  searchDepartments,
  searchCustomers,
  searchDepartment,
} from "@/api/customer.js";
import MySelectCustomer from "@/components/my-select2-customer.vue";

export default {
  components: {
    MySelectCustomer,
  },
  data() {
    return {
      id: 0,
      customerId: 0,
      deptId: 0,
      name: "",
      parentDeptId: 0,
      mobile: "",
      phone: "",
      linkman: "",
      email: "",
      remark: "",

      customers: [],

      selectCustomerDisabled: false,
      copies: 0,
    };
  },
  mounted: function () {
    let oldId = this.$route.query.id;
    this.copies = parseInt(this.$route.query.copies);

    if (oldId !== undefined) {
      this.id = oldId;
      this.searchCustomerDepartment();
    }
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    searchCustomerDepartment: function () {
      searchDepartment(this.id, (v) => {
        this.showDept(v);
      });
    },
    reset: function () {
      this.selectCustomerDisabled = false;
      this.id = 0;
      this.customerId = 0;
      this.deptId = 0;
      this.name = "";
      this.parentDeptId = 0;
      this.mobile = "";
      this.phone = "";
      this.linkman = "";
      this.email = "";
      this.remark = "";
    },
    saveDept: function () {
      const params = {
        id: this.id,
        customer: {
          id: this.customerId,
        },
        departmentNo: this.deptId,
        name: this.name,
        parentDepartmentNo: this.parentDeptId,
        linkman: this.linkman,
        mobile: this.mobile,
        phone: this.phone,
        email: this.email,
        remark: this.remark,
      };

      const jsonParam = JSON.stringify(params);

      createDepartment(jsonParam, (jsonResult) => {
        if (jsonResult.status !== "OK") {
          this.showErrMsg(jsonResult.errmsg);
          // window.alert(jsonResult.errmsg)
        } else {
          this.showErrMsg("操作成功");
        }
      });
    },
    showDept: function (info) {
      this.selectCustomerDisabled = true;
      this.id = info.id;
      this.customerId = info.customer.id;
      this.deptId = info.departmentId;
      this.name = info.name;
      this.parentDeptId = info.parentDepartmentId;
      this.linkman = info.linkman;
      this.mobile = info.mobile;
      this.phone = info.phone;
      this.email = info.email;
      this.remark = info.remark;

      // console.log(this.copies)
      if (this.copies === 1) {
        //copy
        this.id = 0;
        this.selectCustomerDisabled = false;
      }
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>